<template>
  <!-- 临期/到期会员 -->
  <div class="page-container">
    <div class="table-page-search _p-10 _mb-10" style="background-color: #F7F8FA;">
      <div
        class="statisticsBox _pt-20 _pb-20"
        v-for="dict in Dict.getLocal('paymentStatusDict')"
        v-if="dict.dictValue !== 1"
        :key="dict.dictValue"
        :class="{ checked: queryParam.paymentStatus === dict.dictValue }"
        @click="queryParam.paymentStatus = dict.dictValue;handleSearch();"
        >
        <div style="text-align: center;">
          {{ dict.dictLabel }}
          <a-tooltip :title="dict.dictValue === 0 ? '会员被设置了会费为待缴费状态时，会员将流转为待缴费状态' : dict.dictValue === 2 ? '当会员到期时间只剩30天时，会员状态将被提示为临期会员。' : '当会员到期后仍未缴纳会费，将流转为欠费状态。'">
          <a-icon type="question-circle" theme="filled" class="fz-18 _ml-10" />
        </a-tooltip>
        </div>
      </div>

      <a-form>
        <a-form-item label="关键词">
          <a-input v-model="queryParam.keyword" placeholder="姓名/单位" allowClear />
        </a-form-item>
        <a-form-item label="到期时间">
          <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="memberEndTime" class="width-25" />
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button type="link" @click="handleReset">重置筛选条件</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div>
        <span class="_pr-10 color9"
          >已勾选<span class="colorZS _pl-2 _pr-2 fw-7">{{ selectedRowKeys.length }}</span
          >位用户</span
        >
      </div>
      <div>
        <SendMessageSelect
          v-has="'member:paymentManage:send'"
          :dataSource="DataSourceEnum.MEMBERLIST"
          :pageSelectedObj="pageSelectedObj"
        />
        <a-button v-has="'member:paymentManage:exportInterim'" type="primary" ghost @click="excelDown"
          >导出{{ Dict.getDictItem(Dict.getLocal('paymentStatusDict'), queryParam.paymentStatus).dictLabel }}会员表</a-button
        >
      </div>
    </div>
    <div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="newColumns"
        :data="loadData"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (pageNum - 1) * pageSize + index + 1 }}
        </span>

        <!-- 会员名称 -->
        <span slot="memberName" slot-scope="text, record">
          <a @click="tenantDetail(record)">{{ text }}</a>
        </span>
        <span slot="levelNameFilter">
          <FilterRadiobox
            v-model="queryParam.levelId"
            :options="memberLevelOption.map(v => {
                return { value: v.id, label: v.name }
              })
            "
            @search="$refs.table.refresh(true)"
          />
        </span>
        <!-- 用户信息 -->
        <template slot="userInfo" slot-scope="text, record">
          <div class="disFlxAC">
            <a-avatar size="default" icon="user" :src="record.avatar" />
            <div class="_pl-10 fz-12">
              <div>
                <span>{{ record.leadingName }}</span>
              </div>
              <div>{{ record.leadingPhone }}</div>
            </div>
          </div>
        </template>
        <!-- 到期倒计时 -->
        <span
          slot="endTimeDaySlot"
          slot-scope="text, record"
          :style="{ color: getDaysRemainingColor(record.daysRemaining) }"
        >
          {{ record.daysRemainingStr }}
        </span>
        <!-- 缴费状态 -->
        <span slot="paymentStatus" slot-scope="text, record">
          <DictTag :options="Dict.getLocal('paymentStatusDict')" :value="text" />
        </span>

        <!-- 操作 -->
        <div slot="actionFilterIcon" class="disFlxAC min-width-12">
          <CustomTable :name="$route.name" :columns="columns" :newColumns="newColumns" />
        </div>
        <template slot="actionFilter">
          <div></div>
        </template>
        <span slot="action" slot-scope="text, record">
          <template>
            <a-button
              v-for="item in _btnList(record)"
              :key="item.text"
              type="primary"
              ghost
              size="small"
              class="_mr-5"
              @click="item.fn"
            >
              {{ item.text }}
            </a-button>
          </template>
        </span>
      </s-table>
    </div>
    <!-- 续费设置弹窗 -->
    <PaySetModal ref="paySetModal" @refresh="handleSearch" />
  </div>
</template>
<script>
import { STable } from '@/components'
import { memberPaymenrecord, memberPaymenExportExcel, memberLevelGetDownList } from '@/api/system/system'
import CustomTable from '@/components/Cuscolumn'
import PaySetModal from '@/views/member/components/modal/paySet.vue'
import { checkPermission } from '@/utils/authority'
import SendMessageSelect from '@/views/operations/message/components/sendMessageSelect'
import { DataSourceEnum } from '@/enums/member'
import DictTag from '@/components/DictTag'
import FilterCheckbox from '@/components/Table/filterCheckbox'
import FilterRadiobox from '@/components/Table/filterRadiobox'

export default {
  components: {
    STable,
    CustomTable,
    PaySetModal,
    SendMessageSelect,
    DictTag,
    FilterRadiobox
  },
  data() {
    return {
      DataSourceEnum,
      selectedRowKeys: [],
      selectedRows: [],
      memberLevelOption: [],
      queryParam: {
        keyword: '',
        levelId: undefined,
        beginMemberTime: undefined,
        endMemberTime: undefined,
        paymentStatusList: '0,2,3',
        paymentStatus: 2
      },
      // 表头
      columns: [
        {
          title: '序号',
          width: '100px',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '会员名称',
          dataIndex: 'memberName',
          width: '200px',
          ellipsis: true,
          scopedSlots: { customRender: 'memberName' }
        },
        {
          title: '会员职务',
          dataIndex: 'levelName',
          width: '140px',
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'levelNameFilter'
          }
        },
        {
          title: '负责人信息',
          width: '200px',
          scopedSlots: { customRender: 'userInfo' }
        },
        {
          title: '加入时间',
          dataIndex: 'joinTime',
          width: '140px'
        },
        {
          title: '到期时间',
          dataIndex: 'memberEndTime',
          width: '140px'
        },
        {
          title: '到期倒计时',
          dataIndex: 'daysRemainingStr',
          width: '120px',
          scopedSlots: { customRender: 'endTimeDaySlot' }
        },
        {
          title: '续期开始时间',
          dataIndex: 'startTime',
          width: '180px'
        },
        {
          title: '续期结束时间',
          dataIndex: 'endTime',
          width: '180px'
        },
        {
          title: '缴费状态',
          dataIndex: 'paymentStatus',
          width: '180px',
          scopedSlots: { customRender: 'paymentStatus' }
        },
        {
          title: '应缴费用',
          dataIndex: 'unit',
          width: '160px'
        },
        {
          title: '服务专员',
          dataIndex: 'attacheName',
          width: '140px',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
          width: '210px',
          scopedSlots: {
            customRender: 'action',
            filterDropdown: 'actionFilter',
            filterIcon: 'actionFilterIcon'
          }
        }
      ],
      pageNum: 1,
      pageSize: 10,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize
        }
        this.pagination.current = parameter.pageNum
        return memberPaymenrecord(Object.assign(params, this.queryParam))
          .then(res => {
            this.pageNum = parameter.pageNum
            this.pageSize = parameter.pageSize
            this.selectedRows = []
            return res
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
      },
      pageSelectedObj: {
        1: []
      },
      pagination: {
        current: 1,
        pageSize: 10
      }
    }
  },
  created() {
    const { query } = this.$route;
    if(query && query.paymentStatus){
      this.queryParam.paymentStatus = Number(query.paymentStatus);
    }
    this.handelMemberLevelGetDownList()
  },
  computed: {
    memberEndTime: {
      get() {
        return [this.queryParam.beginMemberTime, this.queryParam.endMemberTime]
      },
      set(val) {
        this.queryParam.beginMemberTime = val[0]
        this.queryParam.endMemberTime = val[1]
      }
    },
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name]) {
        return this.$options
          .data()
          .columns.filter(v => {
            const _items = currentColumns[this.$route.name].find(item => item === v.title || item.title === v.title)
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    }
  },

  methods: {
    // 续费
    goPayment(row) {
      let { id } = row
      this.$refs.paySetModal.show({
        id,
        type: 'renewSet'
      })
    },
    // 续费详情
    goCheckPayment(row) {
      let { id } = row
      this.$refs.paySetModal.show({
        id,
        type: 'awaitPayDetail'
      })
    },
    // 跳转租户详情
    tenantDetail(info, type) {
      this.$router.push({
        path: '/member/headquartersInfo',
        query: {
          id: info.id,
          isBack: true,
          examine: true,
          reviewStatus: info.reviewStatus,
          type
        }
      })
    },

    handleSearch() {
      this.$refs.table.refresh(true)
    },
    handleReset() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam)
      this.$refs.table.refresh(true)
    },

    // 会员级别下拉
    handelMemberLevelGetDownList() {
      return memberLevelGetDownList().then(res => {
        if (res.code === 0) {
          this.memberLevelOption = res.data
        }
      })
    },

    // 导出
    excelDown() {
      memberPaymenExportExcel({ ...this.queryParam })
    },

    // 表格数据选中事件
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.pageSelectedObj[this.pagination.current] = selectedRows.map(item => {
        return {
          userId: 'LEADING_' + item.leadingId,
          companyName: item.companyName,
          userName: item.leadingName,
          companyPosition: item.leadingSocialPosition,
          memberLevelName: item.levelName
        }
      })
    },
    getDaysRemainingColor(day) {
      if (day <= 0) {
        return '#ff0000'
      } else if (day > 0 && day <= 30) {
        return '#faad14'
      } else {
        return '#1890ff'
      }
    },
    _btnList(record) {
      let oldList = [
        {
          show: checkPermission('member:paymentManage:interimDetail'),
          text: '详情',
          fn: () => this.goCheckPayment(record)
        },
        {
          show: checkPermission('member:paymentManage:interimEdit'),
          text: '续费设置',
          fn: () => this.goPayment(record)
        }
      ]
      return oldList.filter(v => v.show)
    }
  }
}
</script>
